<template>
  <el-dialog
    :title="`${this.typeTitle}到 (待${this.typeTitle}文件路径已隐藏)`"
    :visible.sync="moveShow"
    width="520px"
    custom-class="move-path-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="move-path-body">
      <el-tree
        :data="list"
        :props="defaultProps"
        :highlight-current="true"
        @current-change="handleNodeClick"
        ref="tree"
      ></el-tree>
    </div>
    <span slot="footer" class="footer-span">
      <el-button
        class="footer-btn new-btn"
        icon="el-icon-folder-add"
        title="新建文件夹"
        @click="handleAppened"
        style="float:left"
      >新建文件夹</el-button>
      <el-button class="footer-btn confirm-btn" type="primary" @click="handleConfirmMove">确 定</el-button>
      <el-button class="footer-btn cancel-btn" @click="moveShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { fileAPI } from "@/utils/api.js";
import { filterPath } from "@/utils/move.js";
import { mapState, mapMutations, mapGetters } from "vuex";
import Bus from "@/upload/bus.js";
export default {
  data() {
    return {
      moveShow: false,
      list: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      curPathId: 0,
      curData: [],
      type: "move"
    };
  },
  computed: {
    ...mapGetters({
      root: "getRootId"
    }),
    ...mapState({
      //cachePath: state => state.move.cachePath,
      //moveFiles: state => state.move.moveFiles
    }),
    typeTitle() {
      return this.type == "move" ? "移动" : "复制";
    }
  },
  watch: {
    async moveShow(newValue) {
      if (newValue) {
        this.curPathId = this.root;
        let list = await this.getPathList();
        this.list = list;
      } else {
        this.list = [];
        this.curPathId = 0;
        this.curData = [];
      }
    }
  },
  mounted() {
    /* this.curPathId = this.root;
    
    let list = await this.getPathList();
    this.list = list; */

    Bus.$on("onMoveFiles", params => {
      this.moveShow = true;
      this.moveFileIds = params.moveFileIds;
      this.parentId = params.parentId;
      this.type = params.type;
    });
  },
  methods: {
    //...mapMutations(["savePath"]),
    async getPathList() {
      //同步请求，获取list 用于更新子节点
      try {
        let res = await fileAPI.operate.get({
          id: this.curPathId
        });
        console.log(this.moveFileIds);
        return filterPath(res.data.rows, this.moveFileIds);
      } catch (err) {
        console.log(err);
      }
    },
    //点击文件夹节点
    async handleNodeClick(data) {
      this.curPathId = data.id;
      this.curData = data;
      if (data.children && !data.children[0].id) {
        //只有第一次点击才要加载
        let list = await this.getPathList();
        this.$nextTick(() => {
          this.$set(data, "children", list);
        });

        // this.savePath(this.list);
      }
    },
    //添加文件夹
    handleAppened() {
      this.$prompt("", "新建文件夹", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: "新建文件夹",
        inputPattern: /.+/,
        inputErrorMessage: "文件夹名不能为空",
        showClose: false,
        closeOnPressEscape: false,
        closeOnClickModal: false
      })
        .then(async ({ value }) => {
          await this.addFolder(value);
        })
        .catch(() => {});
    },
    //确认添加文件夹
    addFolder(name) {
      fileAPI.common
        .add({
          fileType: "FOLDER",
          name,
          pathId: this.curPathId
        })
        .then(async res => {
          // this.$message.success("创建文件夹成功");
          let list = await this.getPathList();
          this.$nextTick(() => {
            if (this.curPathId == this.root) {
              this.list = list;
            } else {
              this.$set(this.curData, "children", list);
            }
          });

          Bus.$emit("onRefresh");

          //this.savePath(this.list);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //确认移动/复制
    handleConfirmMove() {
      if (this.parentId == this.curPathId) {
        this.$message.error(`文件不能${this.typeTitle}到当前目录`);
        this.moveShow = false;
        return;
      }
      let data = {
        moveFileIds: this.moveFileIds,
        toFileId: this.curPathId
      };
      if (this.type == "move") {
        //移动
        fileAPI.operate
          .move(data)
          .then(() => {
            this.$message.success("移动文件成功");
            Bus.$emit("onRefresh");
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.moveShow = false;
          });
      } else {
        //复制
        fileAPI.operate
          .copy(data)
          .then(() => {
            this.$message.success("复制文件成功");
            Bus.$emit("onRefresh");
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.moveShow = false;
          });
      }
    }
  },
  destroyed() {
    Bus.$off("onMoveFiles");
  }
};
</script>

<style lang="scss" scoped>
.move-path-dialog {
  .move-path-body {
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #f2f2f2;
    /* .path-ul {
      li {
        height: 28px;
        line-height: 24px;
        font-size: 12px;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-indent: 50px;
      }
    } */
  }
  .footer-span {
    .footer-btn {
      padding: 8px 12px;
    }
    .confirm-btn {
      color: #fff;
      border-color: $theme-color;
      background-color: $theme-color !important;
    }
    .new-btn,
    .cancel-btn {
      color: $theme-color;
      border-color: #cadcb9;
      background-color: #fff;
    }
  }
}
</style>
<style lang="scss">
.move-path-dialog {
  .el-dialog__title {
    color: #353535;
    font-size: 14px;
  }
  .el-dialog__header {
    background-color: rgb(250, 253, 255);
    border-bottom: 1px solid rgb(208, 223, 231);
  }
  .el-dialog__body {
    padding: 0 20px;
  }
  .el-tree-node__label {
    background: url("../../assets/icon-tree.png") no-repeat;
    background-position: 0 0;
    background-size: 24px auto;
    padding-left: 27px;
    font-size: 12px;
  }
  .expanded + .el-tree-node__label {
    background-position-y: -22px;
  }
}
</style>